<template>
  <div>
    库余管理
    <!-- //查询管理 -->
    <el-form label-width="80px"  style="width: 100%;" :inline="true">
      <table>
        <tr>
          <td><el-button type="primary"  style="margin-right: 180px;" @click="addGoods()"  >新增产品</el-button></td>
        <td></td>
        </tr>
      
      </table>
      
      
    
    </el-form>

    <div>
      <!-- 展示数据 -->
    <el-table
        :data="GoodsDTO"
        ref="mainTable"
        :default-expand-all="false"
        @expand-change="expandChange"
        style="width: 100%">
      <el-table-column
          width="55"/>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
              :key="'childTable'+props.row.id"
              :ref="'childTable'+props.row.prod"
             
              :data="props.row.children"
              style="width: 100%;margin-left: 25px">
              <!-- 子表 -->
            <el-table-column
                width="55"/>
            <el-table-column
                label="产品名称"
                prop="gname">
            </el-table-column>
            <el-table-column
                label="产地"
                prop="product">
            </el-table-column>
            <el-table-column
                label="规格"
                prop="specs">
            </el-table-column>
            <el-table-column
                label="生产批号"
                prop="batchNumber">
            </el-table-column>
            <el-table-column
                label="采购批号"
                prop="approvalNumber">
            </el-table-column>
            <el-table-column
                label="采购单价"
                prop="purchasePrice">
            </el-table-column>
            <el-table-column
                label="采购单位"
                prop="productUnit">
            </el-table-column>
            <el-table-column
                label="采购日期"
                prop="procurementTime">
            </el-table-column>
            <el-table-column
                label="采购数量"
                prop="number">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!-- 父表 -->
      <el-table-column
          label="产品序号"
          prop="gid">
      </el-table-column>
      <el-table-column
          label="产品名称"
          prop="gname">
      </el-table-column>
      <el-table-column
          label="库余"
          prop="sum">
      </el-table-column>
      <el-table-column
          label="商品类型"
          prop="goodsSort">
      </el-table-column>
    </el-table>
  </div>

    <!-- 新增模态框 -->
    <el-dialog title="添加产品" :visible.sync="dialogFormGoods" @close="closeDialog">
      <el-form  :model="goodsEntity" label-width="80px">
        <el-form-item label="产品名称" >
          <el-input v-model="goodsEntity.gname" clearable></el-input>
      </el-form-item>
        <el-form-item label="产品分类">
          <el-cascader
          v-model="goodsEntity.gsid"
          :options="goodsSort"
          :props="defaultProps"
          @change="handleChange" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="预警值" >
          <el-input v-model="goodsEntity.warningNumber" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="notOK">取 消</el-button>
        <el-button type="primary" @click="OK">确 定</el-button>
      </div>
    </el-dialog>
<!-- 数据分析模态框 -->
<el-dialog title="库余分析" :visible.sync="dialogFormGoodsData"  @close="closeDialogTwo">
  <!-- <div>
    查询月份报表
    <div class="container">
      <div class="block">
        <span class="demonstration"
          >选择要查询的月份<el-date-picker
            v-model="month"
            type="month"
            placeholder="选择月"
          >
          </el-date-picker
        ></span>
        <el-button type="primary" icon="el-icon-refresh" @click="reset"
          >重置</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="submit"
          >查询</el-button
        >
      </div>
    </div>
    报表的扇形图
    <div>
      <div
        id="creatorChart"
        style="width: 50%; height: 300px; float: left"
      ></div>
      <div id="stateChart" style="width: 50%; height: 300px; float: left"></div>
      <span class="demonstration"
        >选择年度报表的年份<el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年"
        >
        </el-date-picker
        >(选择完后点击员工进行查询)</span
      >
      <div id="userChart" style="width: 100%; height: 300px; float: left"></div>
    </div> -->
  <!-- </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="notOK">取 消</el-button>
        <el-button type="primary" @click="OK">确 定</el-button>
      </div> -->
    </el-dialog>
<!-- ============================== -->

  </div>
</template>
<script>
export default {
  data() {
    return {
      open: true,
      GoodsDTO: [],
      goodsEntity:{},
      dialogFormGoods:false,
      //选择值
      goodsSort: [],
      ///树的默认规则
        defaultProps: {
          children: 'children',
          label: 'gsname',
          value:'gsid'
        },
        //库余分析
      dialogFormGoodsData:false,
      test:'',
      month: "",
      creator: [],
      state: [],
      year: "",
      statCreator: [],
      sum: "10",
      
    }
  },
  mounted(){
            this.findGoodsDTO();
            this.findGoodsSort();
            // this.sse();
            // this.statList();
  },
  methods: {
    closeDialogTwo(){},
    //库余分析
    goodsanalysis(){
        this.dialogFormGoodsData=true;

    },
    //搜索联级标签内容
    findGoodsSort(){
      this.$axios.get("http://localhost:8080/goods/findGoodsSort").then(resp=>{
            if(resp.data.code == 200){
                this.goodsSort = resp.data.data;
            }
        });
    },
    //处理联级标签
    handleChange(value) {
      //最后一个节点
      // console.log("这是value=",value);
      if(value == undefined){
          value =[];
      }
      this.goodsEntity.gsid=value[(value.length)-1];
        console.log("这是gsid=",this.goodsEntity.gsid);
      },
      //关闭模态框
    closeDialog(){
      this.goodsEntity={};
      this.dialogFormGoods=false;
      },
    notOK(){
      this.goodsEntity={};
      this.dialogFormGoods=false;
    },
    //提交新增
    OK(){
          this.dialogFormGoods=false;
          console.log("这是entity=",this.goodsEntity);
          this.$axios.post("http://localhost:8080/goods/add"
            ,this.goodsEntity).then(resp=>{
            if(resp.data.code == 200){
              this.goodsEntity={};
              this.$message(resp.data.msg);
              this.findGoodsDTO();
            }else{
              this.$message(resp.data.msg);
            }
          });
    },
    //新增产品
    addGoods(){
          this.dialogFormGoods=true;
    },
    //查询所有产品
    findGoodsDTO(){
        this.$axios.get("http://localhost:8080/goods/findgoods").then(resp=>{
            if(resp.data.code == 200){
                this.GoodsDTO = resp.data.data;
            }
        });
    },
    expandChange(row, expanded) {
        console.log(row);
        console.log(expanded);
    },
    //sseTest
    sse(){
        if (window.EventSource) {
              //创建sse
              eventSource = new EventSource(`/createSse`);
              
              eventSource.onopen = function (event) {
                  console.log('SSE链接成功');
              }
              eventSource.onmessage = function (event) {
                  if(event.data){
                      this.test= event.data;
                      console.log('后端返回的数据:', data.value);
                  }
              }
              eventSource.onerror = (error) => {
                  console.log('SSE链接失败');
              };
          } else {
              alert("你的浏览器不支持SSE");
          }
    },
    // //报表
    //  //日期格式转换
    // currentDate(month) {
    //   return (
    //     new Date(month).getFullYear() +
    //     "-" +
    //     ("0" + (new Date(month).getMonth() + 1)).slice(-2)
    //   );
    // },
    // //重置查询
    // reset() {
    //   this.month = "";
    //   this.statList();
    // },

    // //提交查询月份
    // submit() {
    //   this.month = this.currentDate(this.month);
    //   this.statList();
    // },

    //获取数据
    // statList() {
    //   this.$axios.get("/order/stat?month=" + this.month).then((resp) => {
    //     if (resp.data.code == 200) {
    //       if (resp.data.data.creatorStat.length == 0) {
    //         this.creator = [{ name: "无数据", value: "0" }];
    //       } else {
    //         this.creator = resp.data.data.creatorStat;
    //       }
    //       if (resp.data.data.stateStat.length == 0) {
    //         this.state = [{ name: "无数据", value: "0" }];
    //       } else {
    //         this.state = resp.data.data.stateStat;
    //       }
    //       this.drawLine();
    //     }
    //   });
    // },

    // //显示报表
    // showStat(param) {
    //   let userChart = this.$echarts.init(document.getElementById("userChart"));
    //   console.log(this.statCreator);

    //   userChart.setOption({
    //     title: {
    //       // 报表标题
    //       text: param.name + param.year + "年的年度报表",
    //       // 报表标题位置
    //       left: "center",
    //       // 报表副标题
    //       subtext: "以下数据以每月" + this.sum + "单计算",
    //     },
    //     tooltip: {
    //       //trigger: "axis",
    //       axisPointer: {
    //         // 坐标轴指示器，坐标轴触发有效
    //         type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    //       },
    //       formatter: "{b}月 : {c}单",
    //     },
    //     toolbox: {
    //       show: true,
    //       feature: {
    //         //mark: { show: true },
    //         //dataView: { show: true, readOnly: false },//数据源
    //         magicType: { show: true, type: ["line", "bar"] }, //切换视图
    //         restore: { show: true }, //还原
    //         saveAsImage: { show: true }, //下载图片
    //       },
    //     },
    //     legend: {
    //       selectedMode: false,
    //     },
    //     grid: {
    //       left: 100,
    //       right: 100,
    //       top: 50,
    //       bottom: 50,
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: [
    //           "1月",
    //           "2月",
    //           "3月",
    //           "4月",
    //           "5月",
    //           "6月",
    //           "7月",
    //           "8月",
    //           "9月",
    //           "10月",
    //           "11月",
    //           "12月",
    //         ],
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //       },
    //     ],
    //     series: [
    //       {
    //         type: "bar",
    //         label: {
    //           show: true,
    //           formatter: (params) =>
    //             Math.round(params.value * 100) / this.sum + "%",
    //         },
    //         data: this.statCreator,
    //       },
    //     ],
    //   });
    // },

    // //员工年度报表
    // orderLine(param) {
    //   console.log(this.year);
    //   let years = "";
    //   if (this.year != "" && this.year != null) {
    //     years = new Date(this.year).getFullYear();
    //   } else {
    //     years = "2024";
    //     this.year = years;
    //   }
    //   console.log(years);
    //   param.year = years;

    //   this.$axios
    //     .get("/order/statYear", {
    //       params: {
    //         year: years,
    //         creator: param.name,
    //       },
    //     })
    //     .then((resp) => {
    //       if (resp.data.code == 200) {
    //         console.log(resp.data.data);
    //         this.statCreator = resp.data.data;
    //         console.log(this.statCreator);
    //         this.showStat(param);
    //       }
    //     });
    // },

    // //显示扇形统计图
    // drawLine() {
    //   //设置显示月份
    //   let month = "全部数据";
    //   if (this.month != "") {
    //     month =
    //       new Date(this.month).getFullYear() +
    //       "年" +
    //       ("0" + (new Date(this.month).getMonth() + 1)).slice(-2) +
    //       "月";
    //   }
    //   // 基于准备好的dom，初始化echarts实例
    //   //员工销售统计图
    //   let creatorChart = this.$echarts.init(
    //     document.getElementById("creatorChart")
    //     // ,"dark"
    //   ); // 绘制图表
    //   creatorChart.setOption({
    //     //标题
    //     title: {
    //       text: "员工销售统计",
    //       left: "center",
    //       top: "center",
    //       subtext: month,
    //     },
    //     tooltip: { trigger: "item", formatter: "{b} : {c}单({d})%" },
    //     //图例
    //     legend: {
    //       //orient: "vertical",
    //       left: "center",
    //     },
    //     //图形
    //     series: [
    //       {
    //         //pie：扇形，bar：条状
    //         type: "pie",
    //         //stillShowZeroSum: false,
    //         label: {
    //           show: true,
    //           formatter: "{b} : {c}单",//{d}%
    //         },
    //         //数据
    //         data: this.creator,
    //         radius: ["40%", "70%"],
    //       },
    //     ],
    //   });
    //   //单击事件
    //   creatorChart.on("click", this.orderLine);

    //   //销售状态统计图
    //   let stateChart = this.$echarts.init(
    //     document.getElementById("stateChart")
    //   );
    //   stateChart.setOption({
    //     title: {
    //       text: "销售状态统计",
    //       left: "center",
    //       top: "center",
    //       subtext: month,
    //     },
    //     tooltip: { trigger: "item", formatter: "{b} : {c}单({d})%" },
    //     legend: {
    //       //orient: "vertical",
    //       left: "center",
    //     },
    //     series: [
    //       {
    //         label: {
    //           show: true,
    //           formatter: "{b} : {d}%",
    //         },
    //         type: "pie", //pie：扇形，bar：条状
    //         data: this.state,
    //         radius: ["40%", "70%"],
    //       },
    //     ],
    //   });
    //   //单击事件
    //   stateChart.on("click", function (params) {
    //     console.log(params);
    //   });
    // },
  },
};
  


    

</script>



<style>
 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
 
</style>